<!DOCTYPE html>
<html>
	<head>
		<title>CSS Regions: named flow has floats and multiple block formatting contexts and is
				flowed in multiple regions</title>
		<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
		<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
		<meta name="flags" content="ahem">
		<meta name="assert" content="Test checks that floats in named flows are positioned relative
				to their regions and not their initial container, even when multiple regions
				are involved and the named flow contents come from different block formatting contexts.">
		<link rel="match" href="reference/floats-in-named-flow-006-ref.html">
		<style>
		.flow {
			flow-into: f;
			color: gray;
			font-family: Ahem;
			font-size: 20px;
			line-height: 1em;
		}
		.dummy-bfc {
			/* Create a new block formatting context */
			overflow: hidden;
		}
		.floater {
			width: 60px;
			height: 60px;
			background-color: lightblue;
		}
		.left {
			float: left;
		}
		.right {
			float: right;
		}
		.region {
			flow-from: f;
			width: 200px;
			height: 100px;
			margin: 5px;
		}

		.region > p {
			background: red;
		}
		</style>
	</head>
	<body>
		<p>
			Test passes if you see two gray rectangles, each with a blue square inside it. The first
			rectangle should have a blue square in the top right corner, while the second rectangle
			should have a blue square in the top left corner.<br>
			Test fails is you see any red.
		</p>

		<div class="flow floater right"></div>
		<!-- The div below has overflow: hidden to trigger creation of a new block formatting context.
		This tests the fact that contents inside separate block formating contexts behave as if they
		are in a single block formatting context when flowed in a region. -->
		<div class="dummy-bfc">
			<div class="flow">
				xxxxxxx
				xxxxxxx
				xxxxxxx
				xxxxxxxxxx
				xxxxxxxxxx
			</div>
		</div>
		<div class="flow floater left"></div>
		<div class="flow">
			xxxxxxx
			xxxxxxx
			xxxxxxx
			xxxxxxxxxx
			xxxxxxxxxx
		</div>
		<div class="region">
			<p>&nbsp;</p>
		</div>
		<div class="region">
			<p>&nbsp;</p>
		</div>
	</body>
</html>